import React from 'react'
import { Pressable, StyleSheet, Text, View } from 'react-native'

/* 
onPressIn 在按压时被调用。
onPressOut 在按压动作结束后被调用。

在按下 onPressIn 后，将会出现如下两种情况的一种：

用户移开手指，依次触发onPressOut 和onPress事件。
按压持续 500 毫秒以上，触发onLongPress 事件。(onPressOut 在移开手后依旧会触发。)


- android_disableSound       Android     为 true 时，按下不会播放 Android 系统声音。
- android_ripple             Android     使用并配置 Android 波纹效果。
- children                   接收按压状态布尔值的子节点


*/
export default function PressableDemo() {


  const onPressIn = () => {
    console.log('onPressIn');
  }

  const onPressOut = () => {
    console.log('onPressOut');
  }

  const onPress = () => {
    console.log('onPress');
  }

  const onLongPress = () => {
    console.log('onPressIn 持续超过 500 毫秒后调用');
    
  }


  return (
    <View style={styles.root}>
      <Pressable 
        onPress={onPress} 
        onPressIn={onPressIn} 
        onPressOut={onPressOut} 
        onLongPress={onLongPress}
        style={state => {
          return [styles.button, state.pressed && styles.buttonPressed]
        }}
      >
        {state => <Text style={state.pressed ? styles.txtPressed : styles.txt}>按 钮</Text>}
      </Pressable>
    </View>
  )
}
const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: '100%',
    backgroundColor: '#fafafa',
    padding: 32,
  },
  button: {
    width: 300,
    height: 65,
    backgroundColor: 'pink',
    borderRadius: 10,
    justifyContent: 'center',
    alignItems: 'center',
  },
  buttonPressed: {
    backgroundColor: '#4ac960',
  },
  txt: {
    fontSize: 20,
    color: 'white',
    fontWeight: 'bold',
  },
  txtPressed: {
    fontSize: 20,
    color: '#7f7f7f',
    fontWeight: 'bold',
  },
});